<template>
    <div class="hsa-title-pane-item" v-if="isShow" :class="HsaClass">
        <div class="hsa-title-pane-item__header">
            <div>
                <title-box v-if="props.title" :title="props.title"
                    class="hsa-title-pane-item__header-title-box"></title-box>
                <slot name="title-suffix"></slot>
            </div>
            <div>
                <slot name="toolbar"></slot>
            </div>
        </div>

        <div class="hsa-title-pane-item__content" :class="HsaClassContent">
            <slot></slot>
        </div>

    </div>
</template>

<script setup lang="ts">
    import { inject, computed, type Ref } from "vue"
    import TitleBox from '../title/title-box.vue'

    // 组件配置
    defineOptions({
        name: 'HsaTitlePaneItem'
    })

    // 组件属性
    const props = defineProps({
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 对比属性
        name: {
            type: String,
            default: ''
        },
        // 填满
        fill: {
            type: Boolean,
            default: false
        }
    })

    // 计算属性：根据 autoHeight 动态设置类名
    const HsaClass = computed(() => ({
        'hsa-title-pane-item__fill': props.fill
    }))
    const HsaClassContent = computed(() => ({
        'hsa-title-pane-item__content-fill': props.fill
    }))

    // 注入属性:是否折叠
    const control = inject<Ref<string[]>>('hsa-title-pane-steerable')

    // 是否显示
    const isShow = computed(() => {
        if (props.name && control && Array.isArray(control.value)) {
            return control.value.some(item => item === props.name)
        }
        return true
    })
</script>

<style lang="scss" scoped>
    .hsa-title-pane-item__fill {
        height: 100%; // 添加100%高度
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    // 面板头部
    .hsa-title-pane-item__header {
        padding: 10px 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .hsa-title-pane-item__header-title-box {
            margin-right: 10px;
        }
    }

    // 面板内容
    .hsa-title-pane-item__content {
        padding: 0 10px;

        &-fill {
            flex: 1; // 添加flex: 1让其自动填充剩余空间
            overflow: auto; // 内容超出时显示滚动条
        }
    }
</style>